<template>
  <page-card title="应用分类"
             :need-back="true">
    <div>
      <a-form layout="inline">
        <a-row style="height:56px">
          <a-col :span="8">
            <!-- <a-form-item> -->
            <a-space size="small">
              <a-button type="primary"
                        action
                        icon="plus"
                        @click="showModal('1')">新增</a-button>
            </a-space>
          </a-col>
          <a-col :span="16"
                 style="text-align: right;">
            <!-- <a-form-item labelAlign="right"> -->
            <a-input-search style="width:240px"
                            v-model="queryParam.appClassificationName"
                            @search="search"
                            placeholder="请输入分类名称"
                            allowClear />
            <!-- </a-form-item> -->

          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table :pagination="pagination"
             @change="handleTableChange"
             ref="table"
             :rowKey="(record, index) => index"
             :data-source="dataSource"
             :columns="columns">
      <template slot="icon"
                slot-scope="item,record">
        <img class="app-logo"
             v-if="record.icon && record.icon.indexOf('/')>-1"
             :src="storage.baseURL+record.icon" />
        <a-icon v-if="record.icon && record.icon.indexOf('/')==-1"
                style="font-size:50px"
                :type="record.icon" />
        <img class="app-logo"
             v-if="!record.icon"
             :src="defaultImg">

      </template>
      <template slot="status"
                slot-scope="text, record">
        <span v-if="record.status==1">启用</span>
        <span v-if="record.status==0"
              style="color: rgba(31, 31, 31, 0.3);">停用</span>
      </template>
      <template slot="operation"
                slot-scope="text, record">
        <a @click="showModal('0',record)">编辑</a>
        <a-divider type="vertical" />
        <a @click="del(record)">删除</a>
      </template>
    </a-table>

    <a-modal v-model="visible"
             :title="baseTitle"
             @ok="save">
      <a-row>
        <a-col :span="24">
          <a-form-model ref="form"
                        :model="form"
                        :rules="rules"
                        :label-col="{ span: 4 }"
                        :wrapper-col="{ span: 20 }">
            <a-form-model-item label="分类名称"
                               prop="appClassificationName">
              <a-input placeholder="请输入分类名称"
                       v-model.trim="form.appClassificationName"
                       allow-clear />
            </a-form-model-item>
            <a-form-model-item label="分类图标"
                               prop="icon">
              <z-image-uploader :isQuery="imgUpload.isQuery"
                                :showUploadList="imgUpload.showUploadList"
                                :parentId="form.id"
                                :bucketName="imgUpload.bucketName"
                                :systemName="imgUpload.systemName"
                                :limit="1"
                                :fileSize="10"
                                :configGroup="imgUpload.configGroup"
                                v-model="form.fileList"
                                ref="imgUploader" />
              <div style="line-height: 10px;">
                推荐尺寸为100*100的jpg、png格式
              </div>
            </a-form-model-item>
            <a-form-model-item label="分类编码"
                               prop="code">
              <a-input placeholder="请输入分类编码"
                       v-model.trim="form.code"
                       allow-clear />
            </a-form-model-item>
            <a-form-model-item label="排序号"
                               prop="orderNo">
              <a-input-number :min="1"
                              :max="9999"
                              placeholder="请输入排序号"
                              v-model="form.orderNo" />
            </a-form-model-item>
            <a-form-model-item label="是否启用">
              <!-- <a-switch checked-children="开"
                        un-checked-children="关"
                        default-checked
                        v-model="form.status" /> -->
              <z-switch-one-zero checked-children="开"
                                 un-checked-children="关"
                                 default-checked
                                 v-model="form.status" />          
            </a-form-model-item>
          </a-form-model>
        </a-col>
      </a-row>
    </a-modal>
  </page-card>
</template>

<script>
import {
  getAppClassPageList,
  getClassById,
  getMaxOrderNo,
  saveAppClass,
  delAppClass,
  updateStatusAppClassById
} from '../../api/application/index'
import defaultImg from '../../assets/app-default.png'
import { storage } from '@zh/common-utils/http'
import { PAGINATION, TABLE_STATUS_CELL } from '../../constants'
export default {
  data () {
    return {
      storage,
      defaultImg: defaultImg,
      pagination: PAGINATION,
      statusCell: TABLE_STATUS_CELL,
      visible: false,
      dataSource: [],
      baseTitle: '',
      imgUpload: {
        parentId: '',
        isQuery: false, // 当此参数为true时表示其功能不可上传图片
        showUploadList: true, // 是否显示图片列表
        bucketName: 'zongheng-system', // 当前归属系统所在的空间名称
        systemName: 'police-appClass', // 归属系统名称
        configGroup: 'police-appClass_img'
      },
      form: {
        id: '',
        code: '',
        fileList: [], // 图片列表集合
        icon: '',
        appClassificationName: '',
        orderNo: '1',
        status: "1"
      },
      queryParam: {
        appClassificationName: ''
      },
      columns: [
        {
          title: '分类图标',
          dataIndex: 'icon',
          align: 'center',
          scopedSlots: { customRender: 'icon' }
        },
        {
          title: '分类名称',
          dataIndex: 'appClassificationName',
          align: 'center'
        },
        {
          title: '分类编码',
          dataIndex: 'code',
          align: 'center'
        },
        {
          title: '排序号',
          dataIndex: 'orderNo',
          align: 'center'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          align: 'center'
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          align: 'center',
          width: '250px',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      rules: {
        appClassificationName: [
          {
            required: true,
            message: '请输入分类名称'
          },
          { max: 30, message: '分类名称不能超过30位' },
          { max: 30, message: '分类名称不能超过20位' }
        ],
        code: [
          {
            required: true,
            message: '请输入分类编码'
          },
          { max: 30, message: '分类名称不能超过20位' }
        ],
        orderNo: [
          {
            required: true,
            message: '请输入排序号'
          }
        ]
      }
    }
  },
  created () {
    this.initTable()
  },
  mounted () { },
  methods: {
    getMaxOrderNo () {
      getMaxOrderNo().then((res) => {
        this.form = {
          id: '',
          appClassificationName: undefined,
          code: '',
          orderNo: res,
          status: "1"
        }
      })
    },
    clearForm () {
      this.form = {
        id: '',
        appClassificationName: undefined,
        code: '',
        orderNo: '',
        status: "1"
      }
    },
    showModal (val, record) {
      this.baseTitle = val == '1' ? '新增分类' : '编辑分类'
      this.visible = true
      if (val != '1') {
        getClassById(record.id).then(res => {
          this.form = res
        })
        // this.form.id = record.id
        // this.form.appClassificationName = record.appClassificationName
        // this.form.code = record.code
        // this.form.orderNo = record.orderNo
        // this.form.status = record.status
      } else {
        this.getMaxOrderNo()
      }
    },
    save () {
      this.$refs.form.validate((valid) => {
        if (this.form.fileList?.length > 0) {
          this.form.icon = '/storage/download/' + this.form.fileList[0].uid
          // let icon = this.form.fileList[0].url.replace(
          // 	process.env.VUE_APP_API_BASE_URL,
          // 	''
          // )
          // this.form.icon = icon
        }
        if (valid) {
          saveAppClass(this.form).then((res) => {
            this.initTable()
          })
          this.visible = false
        }
      })
    },
    onChange (checked, record) {
      updateStatusAppClassById(record.id).then((res) => {
        this.initTable()
      })
    },
    search() {
      this.pagination.current = 1
      this.initTable()
    },
    initTable () {
      this.queryParam.currPage = this.pagination.current
      this.queryParam.pageSize = this.pagination.pageSize
      getAppClassPageList({ ...this.queryParam }).then((res) => {
        this.dataSource = res.list
        this.pagination.current = res.currPage
        this.pagination.total = res.totalCount
      })
    },
    del (record) {
      const _this = this
      _this.confirm({
        title: '提示',
        content: '确定删除该分类？',
        onOk () {
          delAppClass(record.id).then((res) => {
            _this.initTable()
          })
        },
        onCancel () { }
      })
    },
    handleTableChange (pagination) {
      this.pagination = pagination
      this.initTable()
    }
  }
}
</script>

<style scoped>
.border {
  border: 1px solid rgb(14, 14, 14);
  width: 50%;
  margin: auto;
  height: 400px;
  margin-top: 50px;
}
.app-logo {
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 5px;
}
</style>
